<template>
  <view>
    <!-- 动态渲染按钮 -->
    <view v-for="(item, index) in menuItems" :key="index">
      <icon-button
        :icon-name="item.icon"
        :name="item.name"
        :function="item.action"
        :msg-count="item.msgCount"
        :check-mode="item.checkMode"
        :check-value="item.checkValue"
        @onCheckChanged="handleCheckChanged"
        :remove-mode="item.removeMode"
        @onRemove="item.onRemove"
      />
    </view>
  </view>
</template>

<script>
import IconButton from './IconFunBtn.vue'; // 引入自定义的按钮组件
import {uiNavigation} from './uiNavigation'; // 引入 uiNavigation 类

export default {
  components: {
    IconButton,
  },
  props: {
    funCode: {
      type: String,
      required: true,
    },
    name: {
      type: String,
     // required: true,
    },
  },
  data() {
    return {
      menuItems: [],
    };
  },
  watch: {
    funCode(newCode) {
      this.generateButton(newCode);
    },
    name(newName) {
      this.generateButton(this.funCode, newName);
    },
  },
  mounted() {
    this.generateButton(this.funCode, this.name);
  },
  methods: {
    // 根据 funCode 映射对应的按钮和操作
    generateButton(funCode, name) {
      let button = {};
      switch (funCode) {
        case 'F_CommodityAtttribute':
          button = {
            icon: 'note',
            name: name || '商品属性',
            msgCount: 0,
            checkMode: false,
            checkValue: false,
            action: uiNavigation.showCommodityAttributePage,
            removeMode: false,
            onRemove: () => this.handleRemove('商品属性'),
          };
          break;
        case 'F_MeasurementUnit':
          button = {
            icon: 'news',
            name: name || '计量单位',
            msgCount: 0,
            checkMode: false,
            checkValue: false,
            action: uiNavigation.showMeasurementUnitPage,
            removeMode: false,
            onRemove: () => this.handleRemove('计量单位'),
          };
          break;
        case 'F_CommodityCategory':
          button = {
            icon: 'mine',
            name: name || '商品分类',
            msgCount: 0,
            checkMode: false,
            checkValue: false,
            action: uiNavigation.showCommodityKindPage,
            removeMode: false,
            onRemove: () => this.handleRemove('商品分类'),
          };
          break;
        case 'F_CommodityData':
          button = {
            icon: 'shopping_bag_outlined',
            name: name || '商品数据',
            msgCount: 0,
            checkMode: false,
            checkValue: false,
            action: uiNavigation.showCommodityMgrPage,
            removeMode: false,
            onRemove: () => this.handleRemove('商品数据'),
          };
          break;
        case 'F_Customer':
          button = {
            icon: 'account_box',
            name: name || '客户管理',
            msgCount: 0,
            checkMode: false,
            checkValue: false,
            action: uiNavigation.showCustomerMgrPage,
            removeMode: false,
            onRemove: () => this.handleRemove('客户管理'),
          };
          break;
        case 'F_SupplierMgr':
          button = {
            icon: 'corporate_fare_outlined',
            name: name || '供应商管理',
            msgCount: 0,
            checkMode: false,
            checkValue: false,
            action: uiNavigation.showSupplierMgrPage,
            removeMode: false,
            onRemove: () => this.handleRemove('供应商管理'),
          };
          break;
        case 'F_WareMgr':
          button = {
            icon: 'business',
            name: name || '仓库管理',
            msgCount: 0,
            checkMode: false,
            checkValue: false,
            action: uiNavigation.showWarehouseMgrPage,
            removeMode: false,
            onRemove: () => this.handleRemove('仓库管理'),
          };
          break;
        case 'F_EnterpriseMgt_Org_StoreMgt':
          button = {
            icon: 'store',
            name: name || '门店管理',
            msgCount: 0,
            checkMode: false,
            checkValue: false,
            action: uiNavigation.showStoreMgrPage,
            removeMode: false,
            onRemove: () => this.handleRemove('门店管理'),
          };
          break;
        case 'F_InventoryInMgt':
          button = {
            icon: 'assignment_return',
            name: name || '入库管理',
            msgCount: 0,
            checkMode: false,
            checkValue: false,
            action: uiNavigation.showInventoryBtachInMgrPage,
            removeMode: false,
            onRemove: () => this.handleRemove('入库管理'),
          };
          break;
        case 'F_InventoryOutMgt':
          button = {
            icon: 'assignment_return',
            name: name || '出库管理',
            msgCount: 0,
            checkMode: false,
            checkValue: false,
            action: uiNavigation.showInventoryBtachOutMgrPage,
            removeMode: false,
            onRemove: () => this.handleRemove('出库管理'),
          };
          break;
        case 'F_InventoryInOutRecord':
          button = {
            icon: 'assignment',
            name: name || '库存记录',
            msgCount: 0,
            checkMode: false,
            checkValue: false,
            action: uiNavigation.showInventoryCommodityInOutRecordPage,
            removeMode: false,
            onRemove: () => this.handleRemove('库存记录'),
          };
          break;
        case 'F_InventoryTypes':
          button = {
            icon: 'dashboard',
            name: name || '库存类型',
            msgCount: 0,
            checkMode: false,
            checkValue: false,
            action: uiNavigation.showInventoryTypesPage,
            removeMode: false,
            onRemove: () => this.handleRemove('库存类型'),
          };
          break;
        case 'F_InventoryInquiry':
          button = {
            icon: 'assignment_turned_in',
            name: name || '库存查询',
            msgCount: 0,
            checkMode: false,
            checkValue: false,
            action: uiNavigation.showSubCommodityInventorySumPage,
            removeMode: false,
            onRemove: () => this.handleRemove('库存查询'),
          };
          break;
        // 继续添加所有 `funCode` 对应的按钮
        default:
          button = {
            icon: 'help',
            name: name || '未知功能',
            msgCount: 0,
            checkMode: false,
            checkValue: false,
            action: () => {
              this.$u.toast('未实现的功能');
            },
            removeMode: false,
            onRemove: () => this.handleRemove('未知功能'),
          };
          break;
      }
      this.menuItems = [button]; // 将按钮添加到 menuItems 数组
    },

    // 复选框变化时的处理
    handleCheckChanged(newVal) {
      console.log('复选框状态变化:', newVal);
    },

    // 删除按钮的处理
    handleRemove(itemName) {
      console.log(`${itemName} 已删除`);
    }
  }
};
</script>
